import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import vue2 from '@vitejs/plugin-vue2';
import { createVuePlugin } from 'vite-plugin-vue2';
import { createHtmlPlugin } from 'vite-plugin-html';
import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
import viteCompression from 'vite-plugin-compression';
import removeConsole from 'vite-plugin-remove-console';
import postcssPresetEnv from 'postcss-preset-env';
// import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementUiResolver } from 'unplugin-vue-components/resolvers';
import OptimizationPersist from 'vite-plugin-optimize-persist';
import PkgConfig from 'vite-plugin-package-config';
import legacyPlugin from '@vitejs/plugin-legacy';
import autoprefixer from 'autoprefixer';
import vueJsx from '@vitejs/plugin-vue-jsx';
import langJsx from 'vite-plugin-lang-jsx';
// 自定义 svg 图标
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';

export default ({ mode }) => {
  const { VITE_PORT, VITE_BASE_URL, VITE_APP_BUILD_DIR, VITE_PROXY_DOMAIN, VITE_PROXY_TARGET, VITE_SYSTEM } = loadEnv(
    mode,
    process.cwd(),
  );
  return defineConfig({
    base: VITE_BASE_URL,
    plugins: [
      // svg 图标
      createSvgIconsPlugin({
        // 配置图标路径
        iconDirs: [resolve(process.cwd(), 'src/icons/svg')],
        // 图标id
        symbolId: 'icon-[dir]-[name]',
      }),
      vue2({
        jsx: true,
        jsxOptions: {
          // jsx 配置
          compositionAPI: true,
        },
      }),
      vueJsx(),
      langJsx(),
      // 浏览器兼容
      legacyPlugin({
        targets: [
          // 目标浏览器列表
          '> 0%', // 全球使用率超过 0%
          'Chrome > 4', // Chrome 版本大于 4
          'Android >= 4', // Android 版本大于等于 4
          'IOS >= 7', // iOS 版本大于等于 7
          'not ie <= 6', // 不支持 IE 6 及以下版本
          'Firefox ESR', // Firefox ESR 版本
        ],
        additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
        renderLegacyChunks: true,
        polyfills: [
          // 兼容性 polyfills
          'es.symbol',
          'es.promise',
          'es.promise.finally',
          'es/map',
          'es/set',
          'es.array.filter',
          'es.array.for-each',
          'es.array.flat-map',
          'es.object.define-properties',
          'es.object.define-property',
          'es.object.get-own-property-descriptor',
          'es.object.get-own-property-descriptors',
          'es.object.keys',
          'es.object.to-string',
          'web.dom-collections.for-each',
          'esnext.global-this',
          'esnext.string.match-all',
        ],
        modernPolyfills: [
          // 现代浏览器的 polyfills
          'es.symbol',
          'es.promise',
          'es.promise.finally',
          'es/map',
          'es/set',
          'es.array.filter',
          'es.array.for-each',
          'es.array.flat-map',
          'es.object.values',
          'es.object.define-properties',
          'es.object.define-property',
          'es.object.get-own-property-descriptor',
          'es.object.get-own-property-descriptors',
          'es.object.keys',
          'es.object.to-string',
          'web.dom-collections.for-each',
          'esnext.global-this',
          'esnext.string.match-all',
        ],
      }),
      // 这两个包主要是解决 依赖按需加载的问题.
      PkgConfig(),
      OptimizationPersist(),
      // createVuePlugin({
      //   jsx: true,
      //   // 解决 Dom结构中会出现多余的空白字符，导致文本内容间出现分隔、行内标签间出现空格
      //   vueTemplateOptions: {
      //     compilerOptions: {
      //       whitespace: 'condense',
      //     },
      //   },
      //   jsxOptions: {
      //     // jsx 配置
      //     compositionAPI: true,
      //   },
      // }),
      // UI框架的自动按需导入
      Components({
        resolvers: [ElementUiResolver()],
        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
      }),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            injectScript: `<link rel="icon" href="https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/favicon.png"><script src="https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/ponyfill.min.js"></script><script src="https://wanxiaomeng-1255977238.cos.ap-shanghai.myqcloud.com/mxy/web/StreamSaver.js"></script>`,
            title: VITE_SYSTEM,
          },
        },
        // 注：指定entry后，不需要在index.html添加script标签，若添加了建议删除
        entry: 'src/main.js',
        // template: resolve(__dirname, 'public/index.html'),
        template: 'index.html',
      }),

      ViteImageOptimizer(), // 图片压缩
      viteCompression(), // GZip 压缩
      removeConsole(), // 移除 console
      postcssPresetEnv(), // css 兼容性
    ],
    resolve: {
      alias: {
        '@': resolve(__dirname, 'src'),
        path: 'path-browserify',
        /** 解决element-ui 内部找不到 async-validator 模块的问题 */
        // 'async-validator': resolve(__dirname, 'node_modules/async-validator/dist-web/index.js'),
        // 'v-viewe': resolve(__dirname, 'node_modules/v-viewer'),
      },
      // 省略文件后缀
      extensions: ['', '.js', '.json', '.vue', '.scss', '.css', '.ts', '.jsx', '.less'],
    },
    css: {
      postcss: {
        // 关键代码
        plugins: [
          autoprefixer({
            // 自动添加前缀
            overrideBrowserslist: [
              'Android 4.1',
              'iOS 7.1',
              'Chrome > 31',
              'ff > 31',
              'ie >= 8',
              // 'last 2 versions', // 所有主流浏览器最近2个版本
            ],
            grid: true,
          }),
        ],
      },
      // 导入全局变量
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${resolve('src/style/variables.less')}";`,
          },
          math: 'strict',
          javascriptEnabled: true,
        },
        scss: {
          modifyVars: {
            hack: `true; @import (reference) "${resolve('src/style/index.scss')}";`,
          },
          javascriptEnabled: true,
        },
      },
    },
    server: {
      // 是否开启 https
      https: false,
      // 端口号
      port: VITE_PORT,
      // 服务启动时是否自动打开浏览器
      open: true,
      // 允许跨域
      cors: true,
      // 自定义代理规则
      overlay: {
        warnings: false,
        errors: true,
      },
      proxy: {
        '/dev-api': {
          // target: 'http://192.168.55.35:8081/',
          target: 'https://zhangyu.zwwlkj03.top/api',
          changeOrigin: true, // 是否改变域名
          ws: true,
          rewrite: (path) => path.replace(/^\/dev-api/, ''), // 路径重写，把'/dev-api'替换为''
        },
        '/message-dev': {
          target: 'http://message.wanqudianchi.com/',
          changeOrigin: true, // 是否改变域名
          ws: true,
          rewrite: (path) => path.replace(/^\/message-dev/, '/'), // 路径重写，把'/message-dev'替换为''
          // pathRewrite: {
          //   // 路径重写
          //   '/message-dev': '/', // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
          // },
        },
        '/export-dev': {
          target: 'http://export.zwwlkj03.top',
          changeOrigin: true, // 是否改变域名
          ws: true,
          rewrite: (path) => path.replace(/^\/export-dev/, ''), // 路径重写，把'/export-dev'替换为''
          // pathRewrite: {
          //   // 路径重写
          //   '/export-dev': '', // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
          // },
        },
        '/zhangquan-dev': {
          target: 'http://zq.zwwlkj03.top/api',
          changeOrigin: true, // 是否改变域名
          ws: true,
          rewrite: (path) => path.replace(/^\/zhangquan-dev/, '/'), // 路径重写，把'/export-dev'替换为''
          // pathRewrite: {
          //   // 路径重写
          //   '/zhangquan-dev': '/', // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
          // },
        },
      },
    },
    build: {
      outDir: VITE_APP_BUILD_DIR,
      // 设置最终构建的浏览器兼容目标
      target: 'es2015',
      minify: 'terser', // 使用 Terser 进行代码压缩
      // 构建后是否生成 source map 文件
      sourcemap: false,
      //  chunk 大小警告的限制（以 kbs 为单位）
      chunkSizeWarningLimit: 2000,
      // 启用/禁用 gzip 压缩大小报告
      reportCompressedSize: false,
      //  生产环境时移除console
      drop_console: true,
      drop_debugger: true,
    },
  });
};
